Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

195
Views
Webpack Can't Load Modules ... When "type":""module"?

I'm trying to build a project with Webpack 5.74.0 (after installing it globally):

webpack --config src/webpack.config.js

My src/webpack.config.js file uses import syntax, eg:

import ReactRefreshPlugin from '@pmmmwh/react-refresh-webpack-plugin';

But that should be fine because I have:

"type": "module"

in the project's package.json. However, despite that, when I run Webpack I get:

[webpack-cli] Failed to load '/home/me/project/src/webpack.config.js' config
[webpack-cli] /home/me/project/src/webpack.config.js:1
import ReactRefreshPlugin from '@pmmmwh/react-refresh-webpack-plugin';
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at Object.compileFunction (node:vm:352:18)
    at wrapSafe (node:internal/modules/cjs/loader:1033:15)
    at Module._compile (node:internal/modules/cjs/loader:1069:27)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1159:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Module.require (node:internal/modules/cjs/loader:1005:19)
    at require (node:internal/modules/cjs/helpers:102:18)
    at WebpackCLI.tryRequireThenImport (/home/me/project/node_modules/webpack-cli/lib/webpack-cli.js:204:22)
    at loadConfigByPath (/home/me/project/node_modules/webpack-cli/lib/webpack-cli.js:1404:38)

I understand that I can use loaders to enable import syntax in the project I'm building ... but how can I fix Webpack to read the config file, if it ignores my package.json?

EDIT: I found a workaround: if I rename webpack.config.js => webpack.config.mjs (ie. I force it to recognize the file as an ES Module file) everything works.

But, it still doesn't answer why Webpack ignores "type": "module" in my package.json, so I'm leaving the question open in hopes of understanding that.

about 4 years ago · Juan Pablo Isaza
1 answers
Answer question

0

When you are in webpack.config.js, what you are writing is JavaScript code for Node.js to set up a development environnement. That means that in order to be able to use ES modules with import syntax there, you should use one of the needed set up for Node.js, adding "type": "module" in package.json or using .mjs as you did.

Here is what the Node.js's doc says:

Node.js has two module systems: CommonJS modules and ECMAScript modules. Authors can tell Node.js to use the ECMAScript modules loader via the .mjs file extension, the package.json "type" field, or the --input-type flag. Outside of those cases, Node.js will use the CommonJS module loader.

about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!